<template>
	<view>
		<u-navbar :border-bottom="false" title-color="#333" title-bold title="设置" title-size="36"></u-navbar>

		<view class="d-id">
			<view class="d-item flex flex_sb border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14 font_weight">
					状态
				</view>
				<view class="flex">
					<view class="u-m-r-14 item-vl ">
						{{checked?'在线':'离线'}}
					</view>
					<u-switch v-model="checked" :loading="loading" active-color="#F71313"></u-switch>
				</view>
			</view>
		</view>
		<view class="d-id">
			<view class="d-item flex flex_sb border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14 font_weight">
					服务时间
				</view>
				<view class="">
					<view class="flex" @click="calendarshow=true">
						<view class="u-m-r-4 item-vl">
							{{datetime?datetime:'请选择'}}
						</view>
						<u-icon name="arrow-right" color="#333" size="24"></u-icon>
					</view>
				</view>

			</view>
			<view class="d-item flex flex_sb border_bottom_F6F6F6" v-if="datetime">
				<view class="d-item-t u-m-r-14 font_weight">
					开始时间
				</view>
				<view class="">
					<view class="flex" @click="starttimeshow=true">
						<view class="u-m-r-4 item-vl">
							{{starttime?starttime:'请选择'}}
						</view>
						<u-icon name="arrow-right" color="#333" size="24"></u-icon>
					</view>
				</view>

			</view>
			<view class="d-item flex flex_sb border_bottom_F6F6F6" v-if="datetime">
				<view class="d-item-t u-m-r-14 font_weight">
					结束时间
				</view>
				<view class="">
					<view class="flex" @click="endTimeshow=true">
						<view class="u-m-r-4 item-vl">
							{{endTime?endTime:'请选择'}}
						</view>
						<u-icon name="arrow-right" color="#333" size="24"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<button class="btn_login_btn2" @click="submit">
			设 置
		</button>
		
		<u-picker v-model="starttimeshow" mode="time" :params="params" @confirm="starttimeconfirm"></u-picker>
		<u-picker v-model="endTimeshow" mode="time" :params="params" @confirm="endTimeconfirm"></u-picker>
		<u-calendar v-model="calendarshow" max-date="2050-01-01" mode="range" @change="calendarchange" btn-type="error"
			active-bg-color="#F50909" range-bg-color="#FAEDED" range-color="#F50909"></u-calendar>
		<view class="btn-bo">
			<button class="btn_login_btn" @click="logout">
				退出登录
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: true,
				loading: false,
				// 中间变量，避免在watch中多次回调，造成无限循环
				controlStatus: false,

				calendarshow: false,
				starttimeshow: false,
				endTimeshow: false,

				datetime: '',
				starttime: '',
				endTime: '',
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				
				times:'',
				is_online:'',
				
			}
		},
		onLoad() {
			this.getdetail()
			this.getInfo()
		},
		watch: {
			checked(val) {
				// 等于false，意味着用户手动关闭了switch
				
					
					// 重新打开switch，并让它处于加载中的状态
					// this.checked = true;
					this.loading = true;
					// 模拟向后端发起请求
					this.getRestultFromServer();
				
			}
		},
		methods: {
			//个人信息
			getInfo() {
				this.$api({
					url: '/lawyer/getLawyer',
					method: 'get',
					data: {
						token:uni.getStorageSync("token")
					},
				}).then(res => {
					if (res.code == 1) {
						this.checked = res.data.is_online==1?true:false
					} 
				})
				
			},
			submit(){
				if(!this.times){
					uni.showToast({
						title: "请选择时间段",
						icon: "none"
					});
					return
				}
				if(!this.starttime || !this.endTime){
					uni.showToast({
						title: "请选择开始时间和结束时间",
						icon: "none"
					});
					return
				}
				this.$api({
					url: '/lawyer/set_time_config',
					method: 'post',
					data: {
						token: uni.getStorageSync("token"),
						times:this.times,
						is_online:this.checked?1:0,
						start:this.starttime,
						end:this.endTime
					},
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: "配置成功",
							icon: "none"
						});
						this.getdetail()
					}
				})
			},
			getdetail(){
				let date = new Date();
				let month = date.getMonth()
				this.$api({
					url: '/lawyer/time_config',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						month:month+1,
						
					},
				}).then(res => {
					if (res.data) {
						this.datetime = res.data[0].time + '至' + res.data[1].time
						this.starttime = res.data[0].start_time
						this.endTime= res.data[0].end_time
						this.times=[res.data[0].time,res.data[1].time]
					}
				})
			},
			logout(){
				
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认退出登录吗',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync('token')
							uni.reLaunch({
								url:"/pages/mine/mine"
							})
						}
					}
				});
			
			},
			calendarchange(e) {
				this.datetime = e.startDate + '至' + e.endDate
				
				this.times=[e.startDate,e.endDate]
				
			},
			starttimeconfirm(e){
				this.starttime = e.hour+':'+e.minute
			},
			endTimeconfirm(e){
				this.endTime = e.hour+':'+e.minute
			},
			// switch打开或者关闭时触发，值为true或者false
			change(status) {
				// console.log(status);
			},
			getRestultFromServer() {
				// 通过定时器模拟向后端请求
				this.$api({
					url: '/lawyer/set_online',
					method: 'post',
					data: {
						token: uni.getStorageSync("token"),
						is_online:this.checked?1:0,
					},
				}).then(res => {
					if (res.code == 1) {
						// this.controlStatus = true;
						// 后端允许用户关闭switch，设置checked为false，结束loading状态
						this.loading = false;
						// this.checked = !this.checked;
						// uni.showToast({
						// 	title: "配置成功",
						// 	icon: "none"
						// });
						this.getInfo()
					}
				})
				// setTimeout(() => {
				// 	this.controlStatus = true;
				// 	// 后端允许用户关闭switch，设置checked为false，结束loading状态
				// 	this.loading = false;
				// 	this.checked = false;
				// }, 1500);
			}

		}
	}
</script>

<style scoped lang="scss">
	.btn_login_btn2{
		width: 200rpx;
		height: 60rpx;
		background: linear-gradient( 180deg, #FA2D2D 0%, #F40000 100%);
		border-radius: 8rpx;
		// margin-top: 116rpx;
		font-size: 28rpx;
		color: #fff;
		line-height: 60rpx;
		margin: 32rpx auto;
		text-align: center;
		font-weight: bold;
	}
	.btn-bo {

		position: fixed;
		bottom: 40rpx;
		left: 0;
		z-index: 9;

		.btn_login_btn {
			width: 686rpx;
			height: 110rpx;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-size: 32rpx;
			color: #333;
			line-height: 110rpx;
			margin-left: 32rpx;
			text-align: center;

		}
	}

	.d-id {
		width: 702rpx;
		padding: 0 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 24rpx auto;

		.d-item {
			height: 100rpx;

			.d-item-t {
				width: 160rpx;
			}
		}

		.item-vl {
			font-size: 28rpx;
			color: #9695A3;
			width: 400rpx;
			text-align: right;
		}
	}
</style>